<template>
  <div class="myveri">
      <canvas id="mycanvas" @click="changeCode"></canvas>
  </div>
</template>

<script setup>
    import {getVeriApi} from '../../api/user.ts'
    import {onMounted} from 'vue'
    // 获取验证码接口
    let getVeri=async ()=>{
        let res=await getVeriApi();
        console.log(res,"-----------")
        makeCode(res.data) //验证码传递到 绘制方法
    }
    onMounted(()=>{
           getVeri()
    })
    // 切换验证码
    let changeCode=()=>{
         getVeri()
    }

    // 绘制验证码方法
    let makeCode=(str)=>{
          // str  AC7E
          console.log(str,"--------")
          let mycanvas=document.getElementById("mycanvas")
          let ctx=mycanvas.getContext("2d");
          ctx.clearRect(0,0,360,100)
          ctx.beginPath()
          // 绘制文字
          for(let i=0;i<str.length;i++){
              ctx.font=`${ranNum(50,120)}px 黑体`
              
              ctx.fillStyle=ranColor();
              ctx.fillText(str[i],i*70+ranNum(10,30),ranNum(60,100))
              ctx.stroke();
          }
          // 绘制干扰线
          for(let j=0;j<10;j++){
          
            // 随机颜色
           ctx.beginPath()
            ctx.strokeStyle=ranColor();
            ctx.moveTo(ranNum(0,300),ranNum(0,80))
             ctx.lineTo(ranNum(0,300),ranNum(0,80))
                 ctx.fillStyle=ranColor();
            ctx.stroke();
          
          }
          // 干扰点
            for(let k=0;k<20;k++){
          
            // 随机颜色
           ctx.beginPath()
            ctx.strokeStyle=ranColor();
            let x=ranNum(0,300)
            let y=ranNum(0,80)
            ctx.moveTo(x,y)
             ctx.lineTo(x+5,y+5)
            ctx.fillStyle=ranColor();
            ctx.stroke();
          
          }
    }
    // 随机颜色方法
    let ranColor=()=>{
      return "#"+Math.floor(Math.random()*16777216).toString(16)
    }

    // 随机数方法
    let ranNum=(a,b)=>{
      return Math.floor(Math.random()*(b-a)+a);
    }
    
</script>
<style lang="less" scoped>
    .myveri{
      width: 180px;
      height: 50px;
      background: salmon;
    }
    #mycanvas{
           width: 180px;
           height: 50px;
           background:skyblue;
    }
</style>
